<template>
  <view class="content">
    <view class="g-header">
      {{ modelGet('env.platform') }}
    </view>
    <view class="innerPre">
    </view>
    <view class="inner">

    </view>
    <view class="innerNext">
    </view>
    <menu-bottom></menu-bottom>
  </view>
</template>

<script>
import * as util from '@/common/util'
import _ from 'lodash'
import uCharts from '@qiun/ucharts'

var uChartsInstance = {}
export default {
  components: {},
  data(){
    return {
      title: 'Hello',
      list: [],
      cWidth: 750,
      cHeight: 500,
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ['#FAC858', '#EE6666', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
        padding: [15, 15, 0, 5],
        legend: {},
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          data: [
            {
              min: 0,
            },
          ],
        },
        extra: {
          column: {
            type: 'group',
            width: 30,
            activeBgColor: '#000000',
            activeBgOpacity: 0.08,
            linearType: 'custom',
            seriesGap: 5,
            linearOpacity: 0.5,
            barBorderCircle: true,
            customColor: [
              '#FA7D8D',
              '#EB88E2',
            ],
          },
        },
      },
    }
  },
  onLoad(){

    console.log(`utils`, util.modelGet('userInfo'))

    this.id = this.$Route.query.id
    console.log(`this.id`, this.id)

    //这里的 750 对应 css .charts 的 width
    this.cWidth = uni.upx2px(750)
    //这里的 500 对应 css .charts 的 height
    this.cHeight = uni.upx2px(500)
    this.getServerData()

  },
  onShow(){},
  mounted(){},
  onReady(){},
  methods: {
    getServerData(){
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
          categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
          series: [
            {
              name: '目标值',
              data: [11, 36, 31, 33, 13, 34],
            },
            {
              name: '完成量',
              data: [18, 27, 21, 24, 6, 28],
            },
          ],
        }

        this.chartData = res
        // this.drawCharts('column', res)
      }, 500)
    },
    drawCharts(id, data){
      const ctx = uni.createCanvasContext(id, this)
      uChartsInstance[id] = new uCharts({
        type: 'column',
        context: ctx,
        width: this.cWidth,
        height: this.cHeight,
        categories: data.categories,
        series: data.series,
        animation: true,
        background: '#FFFFFF',
        padding: [15, 15, 0, 5],
        xAxis: {
          disableGrid: true,
        },
        yAxis: {
          data: [{ min: 0 }],
        },
        extra: {
          column: {
            type: 'group',
          },
        },
      })
    },
    tap(e){
      uChartsInstance[e.target.id].touchLegend(e)
      uChartsInstance[e.target.id].showToolTip(e)
    },
  },
}
</script>
<style lang="scss">
//@import "./000.scss";

page {
  background-color: #F7F9FB;
}

.innerPre {

}

.inner {

}

.innerNext {

}

.charts-box {
  width: 100%;
  height: 300px;
}
</style>
